<template>
	<el-row class="container">
		<el-col :span="24" class="header">
			<el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
				{{collapsed?'':sysName}}
			</el-col>
			<el-col :span="10">
				<div class="tools" @click.prevent="collapse">
					<i class="fa el-icon-arrow-left"></i>
				</div>
			</el-col>
			<el-col :span="4" class="userinfo">
				<el-dropdown trigger="hover">
					<span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>我的消息</el-dropdown-item>
						<el-dropdown-item divided @click.native="logout">退出</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>
		</el-col>
		<el-col :span="24" class="main">
			<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
				<!--导航菜单-->
				<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect" unique-opened router v-show="!collapsed">
					<template v-for="(item,index) in menuTree" v-if="!item.hidden">
						<el-submenu :index="index+''" v-if="!item.leaf">
							<template slot="title">
								<i :class="item.iconCls"></i>{{item.name}}</template>
							<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
						</el-submenu>
						<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path">
							<i :class="item.iconCls"></i>{{item.children[0].name}}
						</el-menu-item>
					</template>
				</el-menu>
				<!--导航菜单-折叠后-->
				<ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">
					<li v-for="(item,index) in menuTree" v-if="!item.hidden" class="el-submenu item">
						<template v-if="!item.leaf">
							<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
								<i :class="item.iconCls"></i>
							</div>
							<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
								<li v-for="child in item.children" v-if="!child.hidden" :key="child.path" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>
							</ul>
						</template>
						<template v-else>
							<li class="el-submenu">
								<div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)">
									<i :class="item.iconCls"></i>
								</div>
							</li>
						</template>
					</li>
				</ul>
			</aside>
			<section class="content-container">
				<div class="grid-content bg-purple-light">
					<el-col :span="24" class="breadcrumb-container">
						<el-breadcrumb separator="/" class="breadcrumb-inner">
							<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
								{{ item.name }}
							</el-breadcrumb-item>
						</el-breadcrumb>
					</el-col>
					<el-col :span="24" class="content-wrapper">
						<transition name="fade" mode="out-in">
							<router-view></router-view>
						</transition>
					</el-col>
				</div>
			</section>
		</el-col>
	</el-row>
</template>

<script>
export default {
	data() {
		return {
			sysName: '管理系统',
			collapsed: false,
			sysUserName: '',
			sysUserAvatar: '',
			menuTree: [{
				leaf: true,
				path: '*',
				hidden: true,
				name: '菜单加载中...',
			}]
		}
	},
	methods: {
		onSubmit() {
			console.log('submit!')
		},
		handleopen() {
			
		},
		handleclose() {
			
		},
		handleselect: function(a, b) {
		},
		//退出登录
		logout: function() {
			var _this = this
			this.$confirm('确认退出吗?', '提示', {
			}).then(() => {
				sessionStorage.removeItem('user')
				_this.$router.push('/login')
			}).catch(() => {

			})
		},
		//折叠导航栏
		collapse: function() {
			this.collapsed = !this.collapsed
		},
		showMenu(i, status) {
			this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none'
		}
	},
	mounted() {
		var user = sessionStorage.getItem('user')
		if (user) {
			user = JSON.parse(user)
			this.sysUserName = user.name || ''
			this.sysUserAvatar = user.logo_url || ''
		}
		//获取用户菜单
		let token = sessionStorage.getItem('token')
		let params = this.formatHttpGetParams({ token: token })
		let path = 'api/menu/download'
		this.$http.get(this.$store.state.domain + path + params).then(function(res) {
			if (res.body.respCode == '0000') {
				let meunList = res.body.data
				let routes = this.$router.options.routes
				//菜单树
				let menuTree = []
				//基本路由
				menuTree.push(routes[0])
				menuTree.push(routes[1])
				menuTree.push(routes[2])
				//设备管理菜单
				if (this.hasMenu(meunList, '1001')) {
					let deviceMenu = JSON.parse(JSON.stringify(routes[3]))
					deviceMenu.children = []
					deviceMenu.children.push(routes[3].children[0])
					if (this.hasMenu(meunList, '2003')) {
						deviceMenu.children.push(routes[3].children[1])
					}
					if (this.hasMenu(meunList, '2001')) {
						deviceMenu.children.push(routes[3].children[2])
					}
					menuTree.push(deviceMenu)
				}
				//用户管理菜单
				if (this.hasMenu(meunList, '1002')) {
					let userMenu = JSON.parse(JSON.stringify(routes[4]))
					userMenu.children = []
					if (this.hasMenu(meunList, '2004')) {
						userMenu.children.push(routes[4].children[0])
					}
					menuTree.push(userMenu)
				}
				//监控数据菜单
				if (this.hasMenu(meunList, '1003')) {
					let dataMenu = JSON.parse(JSON.stringify(routes[5]))
					dataMenu.children = []
					if (this.hasMenu(meunList, '2005')) {
						dataMenu.children.push(routes[5].children[0])
					}
					if (this.hasMenu(meunList, '2006')) {
						dataMenu.children.push(routes[5].children[1])
					}
					if (this.hasMenu(meunList, '2008')) {
						dataMenu.children.push(routes[5].children[2])
					}
					menuTree.push(dataMenu)
				}
				//数据分析菜单
				if (this.hasMenu(meunList, '1004')) {
					let chartMenu = JSON.parse(JSON.stringify(routes[6]))
					chartMenu.children = []
					if (this.hasMenu(meunList, '2007')) {
						chartMenu.children.push(routes[6].children[0])
					}
					menuTree.push(chartMenu)
				}

				this.menuTree = menuTree
			} else {
				if (res.body.respMsg != null) {
					alert('获取菜单失败：' + res.body.respMsg)
				} else {
					alert('获取菜单失败')
				}
			}
		}, function() {
			alert('获取菜单失败')
		})

		//获取所有用户信息
		let token2 = sessionStorage.getItem('token')
		let params2 = this.formatHttpGetParams({ token: token2 })
		let path2 = 'api/users/query'
		this.$http.get(this.$store.state.domain + path2 + params2).then(function(res) {
			if (res.body.respCode == '0000') {
				this.$store.state.users = res.body.data
			} else {
				if (res.body.respMsg != null) {
					console.log(res.body.respMsg)
				} else {
					console.log('后台未知异常，请与管理员联系')
				}
			}
		}, function() {
			console.log('网络请求处理失败')
		})
	}
}

</script>

<style scoped lang="scss">
@import '~scss_vars';

.container {
	position: absolute;
	top: 0px;
	bottom: 0px;
	width: 100%;
	.header {
		height: 60px;
		line-height: 60px;
		background: #475669;
		color: #fff;
		.userinfo {
			text-align: right;
			padding-right: 35px;
			float: right;
			.userinfo-inner {
				cursor: pointer;
				color: #fff;
				img {
					width: 40px;
					height: 40px;
					border-radius: 20px;
					margin: 10px 0px 10px 10px;
					float: right;
				}
			}
		}
		.logo {
			height: 60px;
			font-size: 22px;
			padding-left: 20px;
			padding-right: 20px;
			border-color: rgba(238, 241, 146, 0.3);
			border-right-width: 1px;
			border-right-style: solid;
			img {
				width: 40px;
				float: left;
				margin: 10px 10px 10px 18px;
			}
			.txt {
				color: #fff;
			}
		}
		.logo-width {
			width: 230px;
		}
		.logo-collapse-width {
			width: 60px
		}
		.tools {
			padding: 0px 23px;
			width: 14px;
			height: 60px;
			line-height: 60px;
			cursor: pointer;
		}
	}
	.main {
		display: flex;
		position: absolute;
		top: 60px;
		bottom: 0px;
		overflow: hidden;
		aside {
			flex: 0 0 230px;
			width: 230px;
			.el-menu {
				height: 100%;
			}
			.collapsed {
				width: 60px;
				.item {
					position: relative;
				}
				.submenu {
					position: absolute;
					top: 0px;
					left: 60px;
					z-index: 99999;
					height: auto;
					display: none;
				}
			}
		}
		.menu-collapsed {
			flex: 0 0 60px;
			width: 60px;
		}
		.menu-expanded {
			flex: 0 0 230px;
			width: 230px;
		}
		.content-container {
			flex: 1;
			overflow-y: scroll;
			padding: 10px;
			.breadcrumb-container {
				.title {
					width: 200px;
					float: left;
					color: #475669;
				}
				.breadcrumb-inner {
					float: right;
					margin-bottom: 5px;
				}
			}
			.content-wrapper {
				background-color: #fff;
				box-sizing: border-box;
			}
		}
	}
}
</style>